<template>
	<view class="contain">
		<view class="clickclass4" >
			<view class="signIn-top">
				<view class="signIn" :class="{'signIn-highlight-left':isActive=='1'}" @click="isActive='1';selectionChangenew()" >
					日
				</view>
				<view class="signIn" :class="{'signIn-highlight-right':isActive=='2'}" @click="isActive='2';selectionChangenew()">
					月
				</view>
			</view>
		</view>
		<view class="text-center padding-tb" style="font-weight: bold;font-size: 15px;">
			 <view class="" @click="show = true">
			     {{datavalue1}}
			 </view>
		</view>
		<view class="middles-top" v-for="(item,index) in classData" :key="index"  v-if="isActive=='2'">
			<view class="" style="background-color: #fff;padding: 15px 0 20px 0;">
				<view class="">
					<view class="flex" style="margin-top: 10px;">
						<view class="piece">
							<view class="">
								<text class="text-bold">{{item.totalCount}}</text><text>{{isActive=='2'?'次':'人'}}</text>
							</view>
							<view class="text-gray margin-tb-xs">
								应出勤
							</view>
						</view>
						<view class="piece">
							<view class="">
								<text class="text-bold">{{item.attendCount}}</text><text>{{isActive=='2'?'次':'人'}}</text>
							</view>
							<view class="text-gray margin-tb-xs">
								已出勤
							</view>
						</view>
						<view class="piece">
							<view class="">
								<text class="text-bold">{{item.noneCount}}</text><text>{{isActive=='2'?'次':'人'}}</text>
							</view>
							<view class="text-gray margin-tb-xs">
								缺勤
							</view>
						</view>
						<view class="piece">
							<view class="">
								<text class="text-bold">{{item.leaveCount}}</text><text>{{isActive=='2'?'次':'人'}}</text>
							</view>
							<view class="text-gray margin-tb-xs">
								请假
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="" style="width: 100%;height: 10px;background-color: #f7f7f7;">
				
			</view>
			
		</view>
		<view class="middles-top1" v-for="(item1,index1) in checkList" :key="index1" v-if="isActive=='1'">
			<view class="center">
				<view class="padding-bottom-sm">
					宝宝姓名：<text>{{item1.userName}}</text>
				</view>
				<view class="padding-bottom-sm">
					宝宝班级：<text>{{item1.className}}</text>
				</view>
				<!-- <view class="">
					打卡时间：<text v-if="item1.signInTime">{{item1.signInTime.substring(0,5)}}</text>
				</view> -->
				<view style="display: flex;flex-wrap: wrap-reverse;width: 100%;" >
					<view class="">
						打卡时间：<text v-if="item1.signInTime">{{item1.signInTime.substring(0,5)}}</text>
					</view>
					<view class="" style="width: 40px;margin-left: 10px;">
						<u-tag :text="item1.inOut=='1'?'签退':'签到'" plain size="mini"></u-tag>
					</view>
				</view>
			</view>
			<view class="" style="width: 100%;height: 10px;background-color: #f7f7f7;">
				
			</view>
		</view>
		
		<view class="text-center margin-top-xl text-gray" v-if="checkList.length==0 && isActive=='1'">
			暂无打卡记录
		</view>
		
		<view class="text-center margin-top-xl text-gray" v-if="classData.length==0 && isActive=='2'">
			暂无统计记录
		</view>
		
		<u-datetime-picker
				:show="show"
				v-model="value1"
				:mode="datetype"
				ref="datetimePicker"
				:closeOnClickOverlay="true"
				confirmColor = "#1cb8a7"
				:maxDate="value2"
				@close="close"
				@confirm="confirm"
				@cancel="cancel"
		></u-datetime-picker>
		
		
	</view>
</template>

<script>
	import {
		ListStatisticalBySchool,
		ListStatisticalByClass,
		ListStatisticalByUser
	} from '@/api/attendanceRecordTotal.js'
	
	import {
		pageAttendanceRecord
	} from '@/api/attendanceGroup.js'
	
	import qiunDataCharts from "@/systemsubPack/components/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue"
	export default {
		data() {
			return {
				isActive:'1',
				show: false,
				value1: Number(new Date()),
				value2: Number(new Date()),
				datavalue1:'',
				datetype:'date',
				chartData: {},
				opts: {},
				datalist:[],
				classData:[],
				checkList:[],
				
			};
		},
		watch:{
		
		},
		components:{
			qiunDataCharts
		},
		onLoad() {
			console.log('this.value1',this.value1);
			this.firstlistday(this.value1);
			this.value1 = this.result(this.value1,this.datetype);
			this.datavalue1 = this.value1;
			this.param = {
				signInDate:this.datavalue1,
				userId:this.$util.getChild().userId
			}
			this.pageAttendanceRecord(this.param)
		},
		methods: {
			selectionChangenew(){
				if(this.isActive =='1'){
					this.datetype = 'date';
					this.value1 = Number(new Date());
					this.value1 = this.result(this.value1,this.datetype);
					this.datavalue1 = this.value1;
					if(this.datavalue1.length==7){
						this.datavalue1 = this.value1;
					}
					this.param = {signInDate: this.datavalue1,userId:this.$util.getChild().userId};
					this.pageAttendanceRecord(this.param);
				}else{
					this.datetype = 'year-month';
					this.param = {
						startTime : this.firstDayStr,
						endTime : this.lastDayStr,
						userId:this.$util.getChild().userId
					}
					this.ListStatisticalByUser(this.param);
				}
				this.value1 = Number(new Date());
				this.value1 = this.result(this.value1,this.datetype);
				this.datavalue1 = this.value1;
				this.firstlistday(this.value1);
			},
			ListStatisticalByUser(param){
				param.pageSize = 100;
				ListStatisticalByUser(param).then(
					res => {
						if (res.data.code == '0') {
							this.classData = res.data.data.list;
						} else {
							this.$api.showTip(res.data.msg)
						}
					},
					err => {
						this.$api.showTip('服务器错误')
					}
				);
			},
			
			pageAttendanceRecord(param){
				param.pageSize = 100;
				pageAttendanceRecord(param).then(
					res => {
						if (res.data.code == '0') {
							this.checkList = res.data.data.list;
						} else {
							this.$api.showTip(res.data.msg)
						}
					},
					err => {
						this.$api.showTip('服务器错误')
					}
				);
			},
			
			close(){
				this.show = false;
			},
			confirm(e){
				console.log('我是时间啦',e);
				this.show = false;
				this.value1 = this.result(e.value, e.mode);
				this.datavalue1 = this.value1; 
				this.firstlistday(e.value);
				if(e.mode=='date'){
					this.param = {signInDate: this.datavalue1,userId:this.$util.getChild().userId};
					this.pageAttendanceRecord(this.param)
				}else{
					this.param = {
						startTime : this.firstDayStr,
						endTime : this.lastDayStr,
						userId:this.$util.getChild().userId
 					}
					this.ListStatisticalByUser(this.param);
				}
				
			},
			
			firstlistday(e){
				// 将时间戳转换为Date对象
				const date = new Date(e);
				// 获取该月份的第一天
				const firstDay = new Date(date.getFullYear(), date.getMonth(), 1);
				// 获取该月份的最后一天
				const lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0);
				this.firstDayStr = this.formatDate(firstDay); 
				this.lastDayStr = this.formatDate(lastDay);
			},
			
			// 将日期格式化为正常时间格式
			formatDate (date)  {
			  let year = date.getFullYear();
			  let month = date.getMonth() + 1;
			  let day = date.getDate();
			  month = month > 10 ? month : '0' + month;
			  day = day > 10 ? day : '0' + day;
			  return `${year}-${month}-${day}`;
			},
			
			cancel(){
				this.show = false;
			},
			
			result(time, mode) {
			const timeFormat = uni.$u.timeFormat,
				toast = uni.$u.toast
			switch (mode) {
				case 'datetime':
					return timeFormat(time, 'yyyy-mm-dd hh:MM')
				case 'date':
					return timeFormat(time, 'yyyy-mm-dd')
				case 'year-month':
				   return  timeFormat(time, 'yyyy-mm')
				case 'time':
				    return time
				default:
					return ''
			}
		},
		},
		onReady() {
			
		},
	};
</script>

<style  lang="scss" scoped>
	page {
		width: 100%;
		height: 100% !important;
		background-color: #f7f7f7;
	}
	.clickclass4{
		width: 100%;
		text-align: -webkit-center;
		line-height: 36px;
		padding: 10rpx 10rpx;
		background-color: #fff;
	}
	
	.signIn-top{
		width: 100px;
		height: 30px;
		border: 1px solid #ddd;
		border-radius: 15px;
		display: flex;
	}
	
	/deep/.u-cell__body{
		padding: 10px 8px;
	}
	
	.left-label{
		width: 5px;height: 16px;background-color: rgb(28, 184, 167);border-radius: 3px;flex-direction: column;margin: 13px 0 13px 10px;
	}
	
	.righttex{
		text-align: right;
	}
	
	.signIn{
	 width: 50%;
	 text-align: center;
	 line-height: 30px;
	}
	
	
	
	.signIn-highlight-left{
	 width: 50%;
	 text-align: center;
	 line-height: 30px;
	 border-right:1px solid rgb(28, 184, 167);
	 border-top-right-radius:15px;
	 border-bottom-right-radius:15px;
	 border-left:1px solid rgb(28, 184, 167);
	 border-top-left-radius:15px;
	 border-bottom-left-radius:15px;
	 background-color: rgb(28, 184, 167);
	 color: aliceblue;
	}
	
	.signIn-highlight-right{
	 width: 50%;
	 text-align: center;
	 line-height: 30px;
	 border-left:1px solid rgb(28, 184, 167);
	 border-top-left-radius:15px;
	 border-bottom-left-radius:15px;
	 border-right:1px solid rgb(28, 184, 167);
	 border-top-right-radius:15px;
	 border-bottom-right-radius:15px;
	 background-color: rgb(28, 184, 167);
	 color: aliceblue;
	}
	
	.middle{
		background-color: #fff;
		// padding: 20px 10px;
	}
	
	.left-text{
		width: 50px;text-align: right;
	}
	
	.middle-top{
		display: flex;
		
	}
	
	.middles-top{
		
		// margin-top: 20px;
	}
	
	.middles-top1{
		
		// margin-top: 20px;
	}
	
	/deep/.u-cell__value{
		color: #000000 !important;
	}
	.charts-box {
		// padding-top: 55px;
	    width: 65%;
	    height: 250rpx;
	}
	
	.rightDAta{
		text-align: center;
		width: 35%;
	}
	
	.piece{
		width: 25%;text-align: center;
	}
	
	.margin-tb-xs {
	    margin-top: 17px !important; 
	}
	
	.center{
		background-color: #fff;padding: 15px 20px 20px 20px;
		
		text{
			color: #000000;
			margin-left: 50rpx;
		}
		
		view{
			color: #8a8b8c;
		}
	}
	.grace-title{ display:flex; flex-wrap:nowrap;justify-content:space-between; font-weight:normal; align-items:center;}
</style>